import React, { Component } from 'react'
import { View, Text, TextInput, StyleSheet } from 'react-native'
import { connect } from 'react-redux'
import { InputItem, Toast } from 'antd-mobile'
import { Button } from '../../components'
import { passwordReg, mobileReg, NavigationActions } from '../../utils'
import { THEME_BACKGROUND, THEME_LABEL, THEME_TEXT } from '../../static/color';

const styles = StyleSheet.create({
  regPage: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-start',
    padding: 20,
    paddingTop: 100,
    backgroundColor: THEME_BACKGROUND
  },
  regInput: {
    marginBottom: 8
  },
  forgetPasswordTitle: {
    fontSize: 28,
    fontWeight: '500',
    color: 'white',
    textAlign: 'center',
    marginTop: 32,
    marginBottom: 32
  },
  codeRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  codeBtn: { flexBasis: 120 },
  codeBtnDisabled: {
    flexBasis: 120,
    backgroundColor: THEME_TEXT
  },
  message: {
    marginTop: 16,
    color: THEME_TEXT,
    fontSize: 14
  },
  subButton: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 8
  },
  subButtonText: {
    color: 'white',
    fontSize: 14
  }
});

@connect(({ app, Login }) => ({ app, Login }))
class ForgetPassword extends Component {
  state = {
    sendFlag: false,
    second: 30
  }
  componentWillUnmount() {
    this.timer && clearInterval(this.timer);//eslint-disable-line
  }
  getCode = () => {
    if (!this.mobile) {
      return Toast.info('请输入手机号码', 1);
    }
    if (this.state.sendFlag) {
      return Toast.info('操作过于频繁', 1);
    }
    // 倒计时30s
    this.updateState('sendFlag', true);
    this.timer = setInterval(
      () => {
        if (this.state.second <= 0) {
          this.updateState('second', 0);
          this.updateState('sendFlag', false);
          this.timer && clearInterval(this.timer);//eslint-disable-line
        } else {
          this.updateState('second', this.state.second - 1)
        }
      },
      1000
    );
    return null
  }
  mobile = '';
  code = '';
  password = '';
  password2 = '';
  timer;
  updateState(key, val) {
    const states = this.state;
    states[key] = val;
    this.setState(states);
  }
  doSubmit = () => {
    if (!this.mobile) {
      return Toast.info('请输入手机号码', 1);
    }
    if (!this.code) {
      return Toast.info('请输入手机验证码', 1);
    }
    if (!this.password) {
      return Toast.info('请输入登录密码', 1);
    }
    if (!this.password2) {
      return Toast.info('请输入确认密码', 1);
    }
    if (this.password !== this.password2) {
      return Toast.info('前后两次密码不一致', 1);
    }
    return this.goBack();
  }
  goBack = () => {
    this.props.navigation.goBack();
  }
  goLogin = () => {
    const { dispatch } = this.props
    dispatch(NavigationActions.navigate({ routeName: 'Login' }))
  }
  goSignUp = () => {
    const { dispatch } = this.props
    dispatch(NavigationActions.navigate({ routeName: 'SignUp' }))
  }
  render() {
    const message = this.state && this.state.message ? this.state.message : '';
    const codeBtnText = this.state && this.state.sendFlag && this.state.second ? `已发送${this.state.second}s` : '获取验证码';
    const codeBtnStyle = this.state && this.state.sendFlag ?
      styles.codeBtnDisabled : styles.codeBtn;
    return (
      <View style={styles.regPage}>
        <Text style={styles.forgetPasswordTitle}>Forget Password</Text>
        <TextInput
          style={styles.regInput}
          placeholder="请输入你的手机号"
          keyboardType="numeric"
          autoCapitalize="none"
          maxLength={11}
        />
        <View style={[styles.codeRow, styles.regInput]}>
          <TextInput
            style={{ flex: 1 }}
            placeholder="手机验证码"
            keyboardType="numeric"
            autoCapitalize="none"
            maxLength={6}
          />
          <Button
            disabled={this.state.sendFlag}
            style={codeBtnStyle}
            title={codeBtnText}
            onPress={() => this.getCode()}
          />
        </View>
        <TextInput
          style={styles.regInput}
          placeholder="请输入你的密码"
          secureTextEntry={true}
          autoCapitalize="none"
          maxLength={20}
        />
        <TextInput
          style={styles.regInput}
          placeholder="请重新确认你的密码"
          secureTextEntry={true}
          autoCapitalize="none"
          maxLength={20}
        />
        <Button style={styles.regInput} title="找回密码" onPress={() => this.doSubmit()} />
        <View style={styles.subButton}>
          <Text style={styles.subButtonText} onPress={() => this.goLogin()}>去登录</Text>
          <Text style={styles.subButtonText} onPress={() => this.goSignUp()}>重新注册</Text>
        </View>
      </View>
    )
  }
}


export default ForgetPassword
